<template>
    <div class="signin">
        <div class="logo">
            <img src="~assets/imgs/global/logo.png" alt="" />
        </div>
        <div class="signin_options">
            <div class="username">
                <img src="~assets/imgs/global/username.svg" alt="" />
                <input type="text" v-model="username" />
            </div>
            <div class="password">
                <img src="~assets/imgs/global/password.svg" alt="" />
                <input type="password" v-model="password" />
            </div>
            <van-button class="submit" :loading="loading" @click="submitForm()">
                Sign In
            </van-button>
            <span class="msg">
                Don't have an account?
                <router-link class="register" to="/register"
                    >Register</router-link
                >
            </span>
        </div>
    </div>
</template>

<script>
const PassReg = /^(?![A-Z]+$)(?![a-z]+$)(?![0-9]*$)(?![@#￥%^&_+-/=?]+$).{8,16}$/;
export default {
    name: "Signin",
    data() {
        return {
            loading: false,
            username: "",
            password: "",
            isSuccess: false,
        };
    },
    methods: {
        //清空表单
        clear() {
            this.username = "";
            this.password = "";
        },
        //验证方法
        verify() {
            this.isSuccess = false;
            if (!this.username || !this.password) {
                this.loading = false;
                this.$toast.fail("请输入完整信息");
                return;
            } else {
                if (PassReg.test(this.password)) {
                    console.log("密码验证通过");
                    this.isSuccess = true;
                } else {
                    this.loading = false;
                    this.$toast("密码由数字，英文，特殊字符其中两项组成");
                }
            }
        },
        //提交表单
        submitForm() {
            //登录按钮加载中
            this.loading = true;
            this.verify();
            let loginData = {
                username: this.username,
                password: this.password,
            };
            if (this.isSuccess) {
                // 表单填写成功，发送请求
                this.$axios
                    .post("user/login", loginData)
                    .then((res) => {
                        this.clear();
                        this.loading = false;
                        if (res.status === 200) {
                            //Bearer后面有个空格！！！
                            localStorage.setItem("token", "Bearer " + res.data);
                            this.$toast.success("登录成功");
                            //跳转到首页
                            this.$router.push("/music");
                            //读取用户信息
                            this.$store.dispatch("readMsg");
                        }
                        //用户名不存在或密码错误
                        else {
                            this.loading = false;
                            this.$toast.fail("登录失败");
                            return false;
                        }
                    })
                    .catch((err) => {
                        this.clear();
                        this.loading = false;
                        console.log(err);
                    });
            }
            //表单填写失败
            else {
                return false;
            }
        },
    },
};
</script>

<style lang="less" scoped>
.signin {
    width: 100vw;
    height: 100vh;
    z-index: 999;
    position: absolute;
    overflow: hidden;
    background-color: white;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.4rem;
    line-height: 0.6rem;
    img {
        width: 0.6rem;
    }
    .logo {
        flex: 2;
        overflow: hidden;
        img {
            display: block;
            width: 2rem;
            margin: 0.5rem auto;
        }
    }
    @media screen and(min-width:540px) {
        .logo {
            flex: 0;
        }
    }
    .signin_options {
        flex: 3;
        margin: 0 auto;
        width: 80vw;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        input {
            border: 0;
            border-bottom: 1px solid black;
            text-indent: 0.2rem;
        }
        .username {
            height: 1rem;
            margin: 0 0.2rem;
        }
        .password {
            height: 1rem;
            margin: 0 0.2rem;
        }
        .submit {
            width: 100%;
            height: 0.8rem;
            margin: 0.2rem auto;
            line-height: 0.8rem;
            border-radius: 0.4rem;
            border: 1px solid #23b7cb;
            background-color: #23b7cb;
            span {
                font-size: 0.4rem;
            }
        }
        .msg {
            font-size: 0.3rem;
            text-align: center;
            margin: 0.2rem auto;
            .register {
                color: #23b7cb;
            }
        }
    }
}
</style>
